<template>
  <div class="header-wrap">
    <div class="home-header">
      <div class="header-logo">
        <img src="./image/logo.png" alt="" />
      </div>
      <div class="navbar">
        <router-link
          active-class="header-nav-item-active"
          to="/musichomebar"
          class="header-nav-item"
          >音乐馆</router-link
        >
        <router-link
          active-class="header-nav-item-active"
          to="/mymusic"
          class="header-nav-item"
          >我的音乐</router-link
        >
        <router-link to="/" class="header-nav-item">客户端</router-link>
        <router-link to="/" class="header-nav-item">开发平台</router-link>
        <router-link to="/" class="header-nav-item">VIP</router-link>
      </div>
      <div class="header-search">
        <el-input
          v-model="input1"
          class="w-50 m-2"
          size="large"
          placeholder="搜索音乐、MV、歌单、用户"
          :suffix-icon="Search"
        />
      </div>
      <div class="header-opt">
        <el-avatar
          :size="40"
          :src="'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'"
        />
        <el-dropdown>
          <el-button class="header-opt-btn" size="large">
            开通VIP<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>Action 1</el-dropdown-item>
              <el-dropdown-item>Action 2</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-dropdown>
          <el-button size="large" class="header-opt-btn">
            充值<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>Action 1</el-dropdown-item>
              <el-dropdown-item>Action 2</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "NavBar",
};
</script>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import type { TabsPaneContext } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import { ArrowDown } from "@element-plus/icons-vue";
const activeName = ref("first");
const input1 = ref("");
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};

const activeType = ref(1);
const selectHomeMenu = (type: number) => {
  activeType.value = type;
};

// 宽度
const bodyWidth = ref(0);
onMounted(() => {
  bodyWidth.value = document.body.clientWidth;
  // 获取视口宽度

  window.onresize = () => {
    return (() => {
      bodyWidth.value = document.body.clientWidth;
    })();
  };
});
</script>

<style scoped>
html,
body {
  width: 100%;
}
.header-wrap {
  width: 100%;
}
.home-header {
  display: flex;
  align-items: center;
  height: 90px;
  min-width: 1200px;
  width: 1200px;
  margin: 0 auto;
}

.header-logo {
  width: 170px;
  height: 46px;
  margin-right: 28px;
  cursor: pointer;
}

.navbar {
  display: flex;
  justify-content: space-between;
  height: 90px;
}
.navbar a {
  text-decoration: none;
}
.header-nav-item:hover {
  color: #31c27c !important;
}
.header-nav-item {
  display: flex;
  justify-content: center;
  align-items: center;
  /* width: 94px; */
  padding: 0 20px;

  height: 90px;
  color: black;
  font-size: 18px;
}
.header-nav-item-active {
  background-color: #31c27c;
  color: #ffffff;
}
.header-nav-item-active:hover {
  color: #fff !important ;
}

.header-search {
  margin-left: 20px;
  margin-right: 20px;
}
.header-opt {
  display: flex;
  width: 263px;
  height: 90px;
  justify-content: space-between;
  align-items: center;
}
.header-opt-btn:hover {
  background-color: #31c27c;
  color: #ffffff;
}
.header-opt-btn:nth-child(1) {
  background-color: #31c27c;
  color: #ffffff;
}
</style>
